<template>		
	<div class="line-main" v-if="lineData.reportHead">
		<div class="line-item line-head" v-if="lineData.reportHead.completeRatio || lineData.reportHead.quotaValue">
			<div class="line-dess">{{lineData.reportHead.orgName}}</div>
			<p class="des"><span>{{lineData.reportHead.targetValue ? (numFormat(lineData.reportHead.quotaValue) + '/ ' + numFormat(lineData.reportHead.targetValue)) : numFormat(lineData.reportHead.quotaValue)}}</span>  <span class="fr">{{lineData.reportHead.completeRatio}}</span></p>
			<div class="con-des"> 
				<div class="line-con">
					<div class="line-about" :style="'width:'+ (lineData.reportHead.completeRatio ? lineData.reportHead.completeRatio : (lineData.reportHead.targetValue ? (lineData.reportHead.quotaValue/lineData.reportHead.targetValue)+'%' : (isRatio.match('completeRatio') ? lineData.reportHead.quotaValue+'%' : lineData.reportHead.quotaValue)))"></div>				
				</div>
			</div>
		</div>
		<div v-if="reportDetail.length" class="desc-asc" @click="chooseTag">{{sortName}}<i class="icon icon-paixu"></i></div>		
		<div v-if="reportDetail.length" class="line-all" :style="page > nowPage ? 'height:'+ nowPage * 15.9 +'rem;' : 'height:auto;'">			
			<div class="line-item" v-for="(item, index) in reportDetail">
				<div class="line-dess">{{tagIndex == 1 ? 'Top' : 'Bottom'}}{{index + 1}}: {{item.orgName}}</div>
				<p class="des">
					<span>{{
						item.targetValue 
						? 
						(   (isRatio.match('quotaRatio') && isRatio.match('completeRatio'))
							? 
							(item.quotaValue + '% / ' + item.targetValue + '%')
							:
							(numFormat(item.quotaValue) + ' / ' + numFormat(item.targetValue))
						) 
						: 
						(
							isRatio.match('quotaRatio')  
							?
							numFormat(item.quotaValue)+'%' 
							: 
							numFormat(item.quotaValue)
						)}}</span>
					<span class="fr">{{isRatio.match('completeRatio') ? item.completeRatio+'%' : ''}}</span>
				</p>
				<div class="con-des">
					<div class="line-con">
						<div :class="[ {'line-minus': (isRatio.match('completeRatio') ? item.completeRatio : item.quotaValue) < 0} ,'line-about']" :style="'width:'+ (isRatio.match('completeRatio') ? item.completeRatio+'%' : (item.targetValue ? ((item.quotaValue/item.targetValue)*100+'%') : (isRatio ? (item.quotaValue+'%') : (item.quotaValue / topOne*100+'%'))))"></div>
					</div>
				</div>
			</div>
		</div>
		<div :class="[{'hide' :reportDetail.length < 6}, 'more']" @click="loadMore">{{page > nowPage ? '更多' : '收起' }}<i :class="[{'ups' : page == nowPage}, 'icon icon-jiantou']"></i></div>
	</div>
</template>
<script>
/**
 * @param {Array} opt 对象数组
 */
import {numFormat} from '@/utils/index'
export default {
	name: 'dy-line',
	data () {	
		return {	
			tagIndex: 1,
			detailPost: {
				quotaType: 1,	
			},
			numFormat: numFormat,
			lineData: {},
			sort: 'desc',
			nowPage: 1,	   
			page: 1, 	
			isRatio: '',	
			isInit: true,	
			// top1
			topOne: '',
			sortName: '切换倒序',
			// 防止重复请求
			filter: {}
		}
	},
	props: {
		opt: String
	},
	computed: {
		orgId () {
			return this.$store.getters.orgId
		},		
		reportDetail () {
			// 没有数据
			if(this.lineData.reportDetail && this.lineData.reportDetail.length < 1) {	
				return []
			} else {
				let detail = []
				// 含有百分率
				this.topOne = this.lineData.reportDetail[0].quotaValue
				// 只初始化一次
				if(this.isInit) {
					this.isRatio = ''
					// 有完成率的情况
					if(this.lineData.reportHead.completeRatio) {
						this.isRatio += 'completeRatio_'
					} 
					// 
					if (typeof this.topOne == 'string' && this.topOne.match('%')) {
						this.isRatio += 'quotaRatio'
					}
				}

				this.lineData.reportDetail.map(res => {
					if(this.isRatio.match('completeRatio')) {
						res.completeRatio = parseFloat(res.completeRatio)
					} else {
						res.quotaValue = parseFloat(res.quotaValue)
					}
					detail.push(res)
				})

				if(this.lineData.reportDetail) {
					if(this.lineData.reportHead.completeRatio) {
			    		return _.orderBy(detail, ['completeRatio'], [this.sort])
			    	} else {			    		
			    		return _.orderBy(detail, ['quotaValue'], [this.sort])
			    	}
			    }
		    }
	  	},
	  	nowTitle () {
			return this.$store.getters.nowTitle 
		},
		// 只有授信和在库才需要添加参数
		period () {			
    		return this.$store.getters.period.val ? this.$store.getters.period.val : undefined
		}
	},
	watch : {	
		nowTitle () {
			this.getDetail()
		},
		// 此处用地区联动OrgId
		orgId ()  {
			this.getDetail()
		},
		period () {
			this.getDetail();
		},		
	},	
	methods: {			
		// 授信详细 、在库详细
    	getDetail () { 
    		// 防止重复ajax  存储ajax数据
    		if(this.period && this.nowTitle.quotaType && this.orgId) {  
	    		if(this.filter['orgId'+this.orgId+'_quotaType'+this.nowTitle.quotaType+'_period'+this.period]) {
	    			this.lineData = this.filter['orgId'+this.orgId+'_quotaType'+this.nowTitle.quotaType+'_period'+this.period]
	    			this.$store.commit('lineDetail', this.lineData)	
	    		} else {		    		  		
					this.detailPost.orgId = this.orgId
					this.detailPost.period = this.period
					this.detailPost.quotaType = this.nowTitle.quotaType || 1				
	    			this.filter['orgId'+this.orgId+'_quotaType'+this.nowTitle.quotaType+'_period'+this.period] = {}
		    		api[this.opt](this.detailPost).then(data => {    
		    			this.isInit = true
		    			this.$store.commit('lineDetail', data)	
						this.lineData = data
						this.filter['orgId'+this.orgId+'_quotaType'+this.nowTitle.quotaType+'_period'+this.period] = data
						if(data.reportDetail) {
							this.page = Math.ceil(data.reportDetail.length / 5)	
						}
					}) 
				}
			}
    	},
    	// 切换 正序 倒序
    	chooseTag (index, sort) {
    		this.isInit = false
    		if(this.tagIndex == 1) {
	    		this.tagIndex = 2
	    		this.sort = 'asc'
	    		this.sortName ='切换正序'
    		} else {
    			this.tagIndex = 1
	    		this.sort = 'desc'
	    		this.sortName ='切换倒序'
    		}
    	},    
    	loadMore () {    				
    		if(this.nowPage == this.page) {
    			this.nowPage = 1
    		} else {
    			this.nowPage++    
    		}
    	}
	}
}
</script>
<style lang="less" scope>
@import '../assets/less/base.less';
.line-main {
	padding:  .5rem .8rem;
	
	.line-head {
		.line-con .line-about {	
			background-color: #6eafe4;
		}
	}

	.desc-asc {
		height: 1.4rem;
		line-height: 1.4rem;
		text-align: center;
		background: #fafbff;
		color: #808080;

		i{
			font-size: .5rem;
		}
	}

	.block-tag {
		margin-bottom: .5rem;
	}

	.line-item{
 		line-height: 1rem;
 		.line-dess {
 			font-weight: bold;
 			text-indent: .2rem;
 			padding-right: .4rem;
			color: @h1-color;
		}

		.des {
			padding:0 .3rem .2rem .3rem;

			span {
				padding-right: .3rem;
			}
		}

		.con-des {			
			height: 1rem;
		}

		.line-con {	
			width: 100%;
			overflow: hidden;
			height: .2rem;	
			background-color: @on-bg;
			border-radius: .8rem;
		}

		.line-about {
			background-color: @on-color;
			height: 100%;
			border-radius: .8rem;
		}	
	}

	.line-all {
		height: 15.9rem;
		overflow: hidden;
	}
	.more {
		text-align: center;

		i{
			margin-left: .5rem;
			font-size: .5rem;
			display: inline-block;
			transform:rotate(-90deg);
		}

		i.ups {
			transform:rotate(90deg);
		}
	}
}
</style>
